import React, { FC, useEffect } from 'react';
import { Row, Col, Card } from 'antd';
import styles from './recommend-newsong.less';
import { connect, IndexModelState, ConnectProps } from 'umi';
import CardCover from '@/compoments/cardCover/cardCover';

const { Meta } = Card;
interface PageProps extends ConnectProps {
  index: IndexModelState;
  dispatch: any;
}

const recommendNewsong: FC<PageProps> = (props: any) => {
  const { newSongList = [] } = props.index;
  let getData = () => {
    props.dispatch({
      type: 'index/getNewSongList',
    });
  };

  useEffect(() => {
    getData();
  }, []);
  return (
    <div className={styles.recommendNewsong}>
      <div className={styles.index__hd}>
        <h2 className="index__tit">推荐新音乐</h2>
      </div>

      <Row gutter={25}>
        {newSongList
          .filter((item: any, num: number) => num < 8)
          .map((data: any, index: number) => (
            <Col className="gutter-row" span={6} key={index}>
              <Card
                hoverable
                className={styles.cartItem}
                bodyStyle={{ padding: '20px 15px' }}
                cover={<CardCover data={data} imgLabel={'picUrl'}></CardCover>}
              >
                <Meta
                  title={data.name}
                  description={data.song.artists[0].name}
                />
              </Card>
            </Col>
          ))}
      </Row>
    </div>
  );
};

export default connect(({ index }: { index: IndexModelState }) => ({ index }))(
  recommendNewsong,
);
